<template>
	<!-- 点击列表后出现的详情 弹窗 -->
	<view class="popup popup--fixed popup-spot-info flex--row" :class="{'active':detailVisible}" @click="detailVisible=false" >
		<PopupClose></PopupClose>
		<view class="spot-info ">
			<image class="bigim" :src="`${spotContent.img}`" :aria-label="spotContent.name+'照片'" mode="scaleToFill"></image>
			<view class="info flex--col">
				<view class="spot-heading">
					<view class="top flex--col">
						<text class="text--main-dark">{{spotContent.name}}</text>
						<text class="text--secondary-dark">{{spotContent.address}}</text>
					</view>
					<view class="bottom flex--row text--thirdary-dark">
						<view class="bottom-left">
							<text class="spot-time" v-for="(timeline,index) in spotContent.timelines" :key="index">{{timeline}}</text>
						</view>
						<view class="bottom-right flex--row">
							<text class="spot-price">{{spotContent.price}} &#xa5;</text>
						</view>
					</view>
				</view>
				<view class="spot-feature flex--row text--thirdary-grey">
					<view class="feature-item flex--row">
						<text class="feature-item-icon">{{spotContent.friendlyAttr}}</text>
						<view v-show="spotContent.friendly">无障碍友好</view>
						<view v-show="!spotContent.friendly">无障碍不友好</view>
					</view>
					<view class="feature-item flex--row">
						<text class="feature-item-icon">{{spotContent.policyAttr}}</text>
						<view v-show="spotContent.policy">提供残疾人优惠</view>
						<view v-show="!spotContent.policy">不提供残疾人优惠</view>
					</view>
					<view class="feature-item flex--row">
						<text class="feature-item-icon">{{spotContent.flowAttr}}</text>
						<view v-show="spotContent.flow <= 150">人流量低</view>
						<view v-show="spotContent.flow > 150">人流拥挤</view>
					</view>
				</view>
				<view class="spot-describe">
					{{spotContent.intro}}
				</view>
			</view>
		</view>
					
	</view>	
</template>

<script>
	import PopupClose from "@/components/PopupClose/PopupClose.vue"
	export default {
		name:"AttractionDetail",
		components:{
			PopupClose
		},
		data() {
			return {
				detailVisible:false,
				spotContent:null
			};
		},
		methods:{
			open(spot){
				this.processData(spot)
				const timelines = spot.openTime.split('；')
				this.spotContent = spot
				this.spotContent.timelines = timelines
				this.detailVisible = true
			},
			processData(spot){
				spot.openTime = spot.openTime.replaceAll("（","")
				spot.openTime = spot.openTime.replaceAll("）","")
				spot.friendlyAttr = spot.friendly ? "√":"x"
				spot.flowAttr = spot.flow <= 150 ? "√":"x"
				spot.policyAttr = spot.policy ? "√":"x"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 600;
		color:#333;
	}
	
	.text--secondary-grey{
		font-size: 18px;
		font-weight: 600;
		color:#777;
	}
	
	.text--thirdary-dark{
		font-size: 16px;
		font-weight: 500;
		color:#333;
	}
	
	.text--thirdary-grey{
		font-size: 14px;
		font-weight: 500;
		color:#777;
	}
	
	.hidden{
		display:none;
	}
	
	.popup-spot-info{
		width:100%;
		height:100vh;
		top:0%;
		left:0%;
		background:transparent;
		
		justify-content: center;
		align-items: flex-end;
		
		transition:all 1s;
		transform:translateY(90vh);
		&.active{
			background:rgba(#fff,0.5);
			transform:translateY(0vh);
		}
	}
	
	.spot-info{
		@include border-four-roundings;
		background:#fff;
		overflow:hidden;
		width:95vw;
		height:80vh;
		.bigim{
			width:100%;
			border-radius: 10px;
			margin-top: -19px;
		}
		.info{
			height:60%;
			box-sizing: border-box;
			overflow: scroll;
			gap:24px;
			padding:0% 10%;
		}
		
		.spot-heading{
			.top{
				margin-bottom: 12px;
				gap:6px;
			}
			.bottom{
				justify-content: space-between;
				align-items:flex-end;
				&>view{
					width:50%;
				}
				.bottom-right{
					justify-content: center;
					align-items: center;
				}
				.spot-time{
					display: block;
					margin-bottom: 2px;
				}
				
				.spot-price{
					@include border-four-roundings;
					width:80%;
					padding:4px 0px;
					text-align: center;
				}
			}
			
		}
		
		.spot-feature{
			justify-content: space-around;
			.feature-item{
				gap:4px;
				
				&-icon{
					font-size: 18px;
					font-weight: 700;
					color:#FF922B;
				}
			}
			
		}
		
		
		
	}

</style>